<!--
 * @Description: 订单tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: HeAo
 * @LastEditTime: 2021-12-22 09:37:04
-->
<template>
  <div class="order">
    <van-nav-bar title="我的工单" />
    <van-tabs @click="tabClickHandler" v-model="active" color="#1659a0">
      <van-tab title="进行中"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>
    <!-- 订单 -->
    <div>
      <div
        class="orderBox"
        v-for="(item, index) in orders"
        :key="index"
        @click="toWorkeOrderDetails(item)"
      >
        <div class="left">
          <img
            src="@/assets/order.png"
            alt="图片丢失"
            width="50px"
            height="50px"
          />
        </div>
        <div class="right">
          <div>工单状态:{{ item.status }}</div>
          <div>工单类型:{{ item.type }}</div>
          <div>创建时间:{{ item.create_time | datefmt }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { get } from "../../http/axios";
export default {
  data() {
    return {
      active: 0,
      orders: [],
      status: "进行中",
    };
  },
  computed: {
    ...mapState("user", ["info"]),
  },
  methods: {
    // 点击tab的时候执行的回调函数
    tabClickHandler(name, title) {
      // 修改当前data中status的值； 重新加载订单
      this.status = title;
      // 重载数据
      this.findPersonOrder();
    },
    // 查询个人工单
    findPersonOrder() {
      get("/workorder/pageQuery", {
        page: 1,
        pageSize: 100,
        status: this.status,
        account_id: this.info.id,
      }).then((res) => {
        this.orders = res.data.list;
      });
    },
    // 订单点击事件
    toWorkeOrderDetails(workOrder) {
      this.$router.push({
        path: "/orderDetail",
        query: workOrder,
      });
    },
  },
  created() {
    // 调用查询个人工单方法
    this.findPersonOrder();
  },
};
</script>
<style scoped>
.orderBox {
  border: 1px solid #999;
  margin: 10px;
  padding: 10px;
  height: 80px;
  display: flex;
  cursor: pointer;
}
</style>